<template>
  <ModalDialog v-model:visible="isShowDia" secClass="form_card_sec" title="tip">
    <template #content>
      <div class="form_body">
        <div class="context">
          {{ t('bindBankCard') }}
        </div>
        <div class="footer">
          <n-button :bordered="false" class="bottom-btn" @click="goUnbind">
            {{ t("unbind") }}
          </n-button>
        </div>
      </div>
    </template>
  </ModalDialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import ModalDialog from '@/components/ModalDialog.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const { t } = useI18n();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:visible"]);

const isShowDia = computed({
  get: function () {
    return props.visible;
  },
  set: function (value) {
    emit("update:visible", value);
  },
});
const goUnbind = () => {
  router.push({ path: '/wallet/paymentManagement' })
}

</script>
<style lang="less" scoped>
.form_body {
  padding: 20px 12px !important;
  font-size: 18px;
  .context {
    margin: 40px 0;
    text-align: center;
  }
  .footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
